import React, { Component } from 'react';
import './menu.css';
import { Link } from 'react-router-dom'
class Menu extends Component {
  constructor(props) {
    super(props)

    this.state = {
      close: true
    }
  }
  toggleClass = (event) => {
    // console.log(event.target)
    this.setState({close: !this.state.close})
  }
  render() {
    return (
      <div className={`menu ${this.state.close?'closed':''}`} onClick={this.toggleClass}>
        <div className="messages button"><Link to='/checkboxs'>历程</Link></div>
        <div className="music button"><Link to='/books'>书籍</Link></div>
        <div className="home button"><Link to='/shopping'>商城</Link></div>
        <div className="places button"><Link to='/games'>游戏</Link></div>
        <div className="bookmark button"><Link to='/avgAnimation'>SVG动画</Link></div>
        <div className="main button">{this.state.close ? '菜单' : '收起'}</div>
      </div>
    );
  }
}

export default Menu;
